<template>
  <div>
    <div v-bind:class="[firstClass,secondClass]">1212</div>
    <button @click="changeColor">点我切换颜色</button>
    <button @click="resetColor">reset</button>
  </div>
</template>

<script setup>
import {ref} from "vue"
const firstClass = ref("red")
const secondClass = ref()
const changeColor = () => {
  secondClass.value = 'blue'
}
const resetColor = () => {
  secondClass.value = ''
}
</script>

<style scoped>
.red{
  width: 100%;
  height: 20px;
  color: aquamarine;
  background-color:red
}
.blue{
  width: 100%;
  height: 20px;
  color: rgb(165, 54, 109);
  background-color: blue;
}
</style>